<!--
 * @Author: your name
 * @Date: 2021-02-27 23:58:43
 * @LastEditTime: 2021-07-22 16:01:11
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \vue3-antd-koa\vue3-antd-pc\src\blocks\card-list.vue
-->
<template>
  <section class="card-list">
    <a-card
      v-for="record of cardRecords"
      @click="handler(record.id)"
      :key="record.id"
      :title="record.title"
      :extra="record.time"
      hoverable
      class="card"
    >
      {{ record.synopsis }}
    </a-card>
  </section>
</template>
<script>
export default {
  props: {
    cardRecords: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const handler = (id) => emit("handler", id);
    return {
      handler,
    };
  },
};
</script>

<style scoped>
.card-list {
  padding-bottom: 30px;
}

.card {
  margin: 20px;
}
</style>